import Vue from "vue"
import Vuex from "vuex"
import axios from "axios"
axios.defaults.baseURL = "http://localhost:2107/"
import {some} from "./some"

Vue.use(Vuex);    // 全局注册声明使用插件 vuex

// 每一个 Vuex 应用的核心就是 store（仓库）  “store”基本上就是一个容器 

// 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation
const store =  new Vuex.Store({
    // Vuex 切割模块化
    modules:{
      some:some,
    },
    // Vuex 的状态存储是响应式的
    // state 存放组件的数据  大的对象  单一状态树  一个对象就包含了全部的应用层级状态 
    state:{
        count:2100,
        msg:'2107-daydayup',
        city:"BIG武汉",
        word:"ARe you oK??",
        inp:"2107-YYDS",
        data:{
            list:[],
            users:[],
            first:[],
            txt:"2107-天道酬勤",
            num:888,
            flag:true 
        }
    },
    mutations:{    // 修改状态 
        //  更改 Vuex 的 store 中的状态的唯一方法是提交 mutation   commit 
        //  vuex 中的 mutation 非常类似于事件   事件名称+参数   
        countadd(state){
            // state.count = state.count+1;
            state.count+=1;
        },
        countdesc(state){
            state.count-=1;
        },
        changeCount(state,payload){
            state.count+=payload; 
        },
        changeCity(state,payload){
            state.city = payload;
        },
        changeMsg(state,payload){
            state.msg = payload;
        },
        changeWord(state,payload){
            state.word = payload; 
        },
        changeDataText(state,payload){
            // state.data.txt = payload ; 
            // 新对象替换老对象  每次返回新对象  
            state.data = {...state.data,txt:payload}; 
        },
        changeDataNum(state,payload){
            state.data = {...state.data,num:state.data.num+payload}
        },
        changeDataFlag(state,payload){
            state.data = {...state.data,flag:payload}; 
        },
        changeInp(state,payload){
          state.inp = payload;
        },
        changeUsersAsync(state,payload){
          state.data = {...state.data,users:payload}; 
        }
    },
    // 动作信号 
    actions:{
      changeCountAc(context,payload){
          context.commit("changeCount",payload);  // 提交一个 mutation 
      },
      changeInpAsync({commit}){
         axios.get("/first")
         .then(res=>{
            commit("changeInp",res.data[1])
         })
      },
      changeUsersAsync({commit}){
        axios.get("/users")
        .then(res=>{
           commit("changeUsersAsync",res.data)
        })
      }
    },

    getters:{
        // 依赖某一个数值   store 中的 state 中派生出一些状态  
        // state  返回新的数据
        newCount(state){
            return state.count * 10 + 999; 
        }
    },
})

export default store 








/*
1. Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 
2. 集中式管理应用里面所有组件的数据(状态)  实现数据的集中式管理   实现组件通信 



state，驱动应用的数据源
view，以声明方式将 state 映射到视图  
action 动作信号  


3. vuex 遵循  单向数据流   

4. vuex 借鉴了 (flux  redux mobx)

5. (Vue 组件  +  state + actions + mutations (store ))

6. Vuex 的原理 
a. 用户界面或者初始化发送一个action动作信号  dispatch 
b. action 里面再去提交一个 mutations 的函数  commit 
c. mutations 里面再去修改 mutate 状态 
d. state 被改变后再去重新刷新视图,
e. 视图更新 获取最新的数据  实现一个数据的集中式管理 

7. vuex 使用的场景
数据共享  
数据缓存  (ajax)
复杂组件数据通信  

如果某个组件内部独享的数据  那就不需要vuex

四个辅助函数 
mapState
mapMutations
mapActions
mapGetters

*/ 
